<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
         /* 自定义字体关键词 */
         @font-face {    
            /* 自定义字体的名称 */
            font-family: "clockIcon";   
            /* 自定义字体的路径 */
            src: url(../font/clockicons.woff2);
        }
        .countTime{
            font-size: 32px;
            font-family: "clockIcon";
            padding: 10px 20px;
        }
        .milli{
            font-size: 20px;
        }
        .buttonGroup{
            padding:5px 20px;
        }
    </style>
</head>
<body>
    <div class="countTime">
        <span class="minute">00</span>:<span class="second">00</span>.<span class="milli">00</span>
    </div>
    <div class="buttonGroup">
        <button class="start">开始</button>
        <button class="pause">暂停</button>
        <button class="reset">重置</button>
    </div>
</body>
<script>
    var minuteSpan = document.getElementsByClassName("minute")[0];
    var secondSpan = document.getElementsByClassName("second")[0];
    var milliSpan = document.getElementsByClassName("milli")[0];
    var start = document.getElementsByClassName("start")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var reset = document.getElementsByClassName("reset")[0];


    // 问题(1) 变量跨作用域使用  一个作用域中声明的变量 无法在同级的另一个作用域中使用?
    // 解决方法: 将变量提取到公共作用域

    // 问题(2) 每次点击都会启动一个计时器,多个计时器同时运行会导致计数加快,timer只能记录最后一个计时器的编号 => 前面的无法清除
    // 解决方法: 保证只有一个计时器运行
    // a. 先清除上一个计时器 在启动下一个


    var ms = 0;
    var timer = null;

    start.onclick = function(){
        clearInterval(timer);  //先清除上一个计时器 在启动下一个
        timer = setInterval(function(){
            ms += 10;
            
            var milli = ms % 1000 / 10;
            var second = parseInt(ms / 1000) % 60;
            var minute = parseInt(ms / 1000 / 60) % 60;
            
            console.log(ms,minute,second,milli);

            minuteSpan.innerText = beauty(minute);
            secondSpan.innerText = beauty(second);
            milliSpan.innerText = beauty(milli);
        },10);
    }
    pause.onclick = function(){
        clearInterval(timer);
    }
    reset.onclick = function(){
        clearInterval(timer);
        minuteSpan.innerText = beauty(0);
        secondSpan.innerText = beauty(0);
        milliSpan.innerText = beauty(0);
    }



    function beauty(num) {
        return num < 10 ? "0" + num : num;
    }



</script>
</html>